<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 物资归还</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link rel="stylesheet" href="../css/styles.css">
</head>
<body>
  <div class="device-container">
    <!-- 状态栏 -->
    <div class="status-bar">
      <div class="status-bar-left">
        <span class="time">9:41</span>
      </div>
      <div class="status-bar-right">
        <i class="fas fa-signal signal"></i>
        <i class="fas fa-wifi wifi"></i>
        <i class="fas fa-battery-full battery"></i>
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-left">
        <a href="material.html"><i class="fas fa-arrow-left"></i></a>
      </div>
      <div class="nav-title">物资归还</div>
      <div class="nav-right">
        <i class="fas fa-question-circle"></i>
      </div>
    </div>

    <!-- 应用内容 -->
    <div class="app-content">
      <form>
        <!-- 基本信息 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>基本信息</span>
            <span class="text-red-500 text-sm">*必填</span>
          </div>
          <div class="card-body">
            <div class="form-group">
              <label class="form-label">归还标题<span class="text-red-500">*</span></label>
              <input type="text" class="form-control" placeholder="请输入归还标题" required>
            </div>
            
            <div class="form-group">
              <label class="form-label">归还部门<span class="text-red-500">*</span></label>
              <div class="relative">
                <select class="form-control appearance-none" required>
                  <option value="">请选择归还部门</option>
                  <option value="1">内科</option>
                  <option value="2">外科</option>
                  <option value="3">儿科</option>
                  <option value="4">妇产科</option>
                  <option value="5">急诊科</option>
                  <option value="6">检验科</option>
                  <option value="7">放射科</option>
                  <option value="8">药剂科</option>
                  <option value="9">护理部</option>
                  <option value="10">行政部</option>
                </select>
                <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
                  <i class="fas fa-chevron-down text-gray-400"></i>
                </div>
              </div>
            </div>
            
            <div class="form-group">
              <label class="form-label">归还日期<span class="text-red-500">*</span></label>
              <input type="date" class="form-control" required>
            </div>
            
            <div class="form-group mb-0">
              <label class="form-label">归还原因<span class="text-red-500">*</span></label>
              <textarea class="form-control" rows="3" placeholder="请简要说明归还原因" required></textarea>
            </div>
          </div>
        </div>
        
        <!-- 物资清单 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>物资清单</span>
            <span class="text-red-500 text-sm">*必填</span>
          </div>
          <div class="card-body">
            <div class="mb-4">
              <button type="button" class="btn-primary-outline w-full" id="addMaterialBtn">
                <i class="fas fa-plus mr-2"></i>添加物资
              </button>
            </div>
            
            <div class="material-list" id="materialList">
              <!-- 物资项 -->
              <div class="material-item">
                <div class="material-header">
                  <div class="material-name">一次性医用口罩</div>
                  <button type="button" class="btn-icon delete-material">
                    <i class="fas fa-trash-alt text-red-500"></i>
                  </button>
                </div>
                <div class="material-body">
                  <div class="material-info">
                    <div class="info-item">
                      <span class="info-label">规格：</span>
                      <span class="info-value">50只/盒</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">借用数量：</span>
                      <span class="info-value">20盒</span>
                    </div>
                  </div>
                  <div class="material-quantity">
                    <span class="quantity-label">归还数量：</span>
                    <div class="quantity-control">
                      <button type="button" class="quantity-btn minus">
                        <i class="fas fa-minus"></i>
                      </button>
                      <input type="number" class="quantity-input" value="20" min="1" max="20">
                      <button type="button" class="quantity-btn plus">
                        <i class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="material-footer">
                  <div class="form-group mb-0">
                    <label class="form-label text-sm">物资状态</label>
                    <div class="flex space-x-4">
                      <label class="radio-item">
                        <input type="radio" name="status-1" value="normal" checked>
                        <span class="radio-text">完好</span>
                      </label>
                      <label class="radio-item">
                        <input type="radio" name="status-1" value="damaged">
                        <span class="radio-text">损坏</span>
                      </label>
                      <label class="radio-item">
                        <input type="radio" name="status-1" value="lost">
                        <span class="radio-text">丢失</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="material-item">
                <div class="material-header">
                  <div class="material-name">医用酒精</div>
                  <button type="button" class="btn-icon delete-material">
                    <i class="fas fa-trash-alt text-red-500"></i>
                  </button>
                </div>
                <div class="material-body">
                  <div class="material-info">
                    <div class="info-item">
                      <span class="info-label">规格：</span>
                      <span class="info-value">500ml/瓶</span>
                    </div>
                    <div class="info-item">
                      <span class="info-label">借用数量：</span>
                      <span class="info-value">10瓶</span>
                    </div>
                  </div>
                  <div class="material-quantity">
                    <span class="quantity-label">归还数量：</span>
                    <div class="quantity-control">
                      <button type="button" class="quantity-btn minus">
                        <i class="fas fa-minus"></i>
                      </button>
                      <input type="number" class="quantity-input" value="8" min="1" max="10">
                      <button type="button" class="quantity-btn plus">
                        <i class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
                <div class="material-footer">
                  <div class="form-group mb-0">
                    <label class="form-label text-sm">物资状态</label>
                    <div class="flex space-x-4">
                      <label class="radio-item">
                        <input type="radio" name="status-2" value="normal" checked>
                        <span class="radio-text">完好</span>
                      </label>
                      <label class="radio-item">
                        <input type="radio" name="status-2" value="damaged">
                        <span class="radio-text">损坏</span>
                      </label>
                      <label class="radio-item">
                        <input type="radio" name="status-2" value="lost">
                        <span class="radio-text">丢失</span>
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 物资状态说明 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>物资状态说明</span>
            <span class="text-gray-500 text-sm">选填</span>
          </div>
          <div class="card-body">
            <div class="form-group mb-0">
              <textarea class="form-control" rows="3" placeholder="请说明物资损坏或丢失的原因"></textarea>
            </div>
            <div class="text-xs text-gray-500 mt-2">
              <i class="fas fa-info-circle mr-1"></i>如有物资损坏或丢失，请详细说明原因，以便管理员审核
            </div>
          </div>
        </div>
        
        <!-- 审批流程 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>审批流程</span>
          </div>
          <div class="card-body">
            <div class="approval-flow">
              <div class="approval-step">
                <div class="step-icon">
                  <i class="fas fa-user-check"></i>
                </div>
                <div class="step-info">
                  <div class="step-name">部门主管审批</div>
                  <div class="step-approver">张主管</div>
                </div>
              </div>
              <div class="approval-connector"></div>
              <div class="approval-step">
                <div class="step-icon">
                  <i class="fas fa-warehouse"></i>
                </div>
                <div class="step-info">
                  <div class="step-name">物资管理员确认</div>
                  <div class="step-approver">李管理</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 附件 -->
        <div class="card mx-4 mt-4">
          <div class="card-header">
            <span>附件</span>
            <span class="text-gray-500 text-sm">选填</span>
          </div>
          <div class="card-body">
            <div class="mb-4">
              <button type="button" class="btn-primary-outline w-full">
                <i class="fas fa-paperclip mr-2"></i>添加附件
              </button>
            </div>
            <div class="text-center text-gray-500 text-sm">
              可上传物资状态照片或相关文件
            </div>
          </div>
        </div>
        
        <!-- 提交按钮 -->
        <div class="fixed-bottom-btn">
          <button type="submit" class="btn-primary w-full">提交申请</button>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 物资选择模态框 -->
  <div class="modal" id="materialModal">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-title">选择已借用物资</div>
        <button class="modal-close" id="closeModal"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <div class="search-box mb-4">
          <i class="fas fa-search search-icon"></i>
          <input type="text" placeholder="搜索物资名称或编号" class="search-input">
        </div>
        
        <!-- 筛选标签 -->
        <div class="filter-tags mb-4 flex overflow-x-auto pb-2">
          <div class="filter-tag active">全部</div>
          <div class="filter-tag">医疗耗材</div>
          <div class="filter-tag">办公用品</div>
          <div class="filter-tag">设备仪器</div>
        </div>
        
        <div class="material-select-list">
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">一次性医用手套</div>
              <div class="material-select-meta">规格：100只/盒 | 借用数量：15盒</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">医用纱布</div>
              <div class="material-select-meta">规格：10cm×10cm | 借用数量：50包</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">医用棉签</div>
              <div class="material-select-meta">规格：100支/包 | 借用数量：30包</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">碘伏</div>
              <div class="material-select-meta">规格：500ml/瓶 | 借用数量：5瓶</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
          
          <div class="material-select-item">
            <div class="material-select-info">
              <div class="material-select-name">医用胶带</div>
              <div class="material-select-meta">规格：1.25cm×9.1m | 借用数量：20卷</div>
            </div>
            <div class="material-select-action">
              <i class="fas fa-plus-circle text-blue-500"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-primary w-full" id="confirmMaterial">确定</button>
      </div>
    </div>
  </div>
  
  <script>
    // 添加物资按钮
    const addMaterialBtn = document.getElementById('addMaterialBtn');
    const materialModal = document.getElementById('materialModal');
    const closeModal = document.getElementById('closeModal');
    const confirmMaterial = document.getElementById('confirmMaterial');
    const materialList = document.getElementById('materialList');
    
    // 初始化物资状态说明区域，默认隐藏
    const statusExplanationCard = document.querySelector('.card:has(.card-header span:contains("物资状态说明"))');
    if (statusExplanationCard) {
      statusExplanationCard.style.display = 'none';
    }
    
    addMaterialBtn.addEventListener('click', function() {
      materialModal.classList.add('active');
    });
    
    closeModal.addEventListener('click', function() {
      materialModal.classList.remove('active');
    });
    
    confirmMaterial.addEventListener('click', function() {
      materialModal.classList.remove('active');
      // 添加选中的物资到列表中
      const selectedItems = document.querySelectorAll('.material-select-item.selected');
      if (selectedItems.length > 0) {
        selectedItems.forEach((item, index) => {
          const materialName = item.querySelector('.material-select-name').textContent;
          const materialMeta = item.querySelector('.material-select-meta').textContent;
          const specs = materialMeta.split('|')[0].trim().replace('规格：', '');
          const borrowedQuantity = materialMeta.split('|')[1].trim().replace('借用数量：', '');
          
          // 提取数量和单位
          const quantityMatch = borrowedQuantity.match(/(\d+)([^\d]+)/);
          const quantity = quantityMatch ? quantityMatch[1] : '1';
          const unit = quantityMatch ? quantityMatch[2] : '个';
          
          // 创建新的物资项
          addMaterialItem(materialName, specs, quantity, unit, index + selectedItems.length);
        });
        
        // 更新物资状态事件监听
        updateStatusRadioListeners();
      }
    });
    
    // 物资选择
    const materialSelectItems = document.querySelectorAll('.material-select-item');
    materialSelectItems.forEach(item => {
      item.addEventListener('click', function() {
        this.classList.toggle('selected');
        const icon = this.querySelector('.material-select-action i');
        if (this.classList.contains('selected')) {
          icon.classList.remove('fa-plus-circle');
          icon.classList.add('fa-check-circle');
        } else {
          icon.classList.remove('fa-check-circle');
          icon.classList.add('fa-plus-circle');
        }
      });
    });
    
    // 搜索物资功能
    const searchInput = document.querySelector('.search-input');
    if (searchInput) {
      searchInput.addEventListener('input', function() {
        const searchText = this.value.toLowerCase();
        const materialItems = document.querySelectorAll('.material-select-item');
        
        materialItems.forEach(item => {
          const materialName = item.querySelector('.material-select-name').textContent.toLowerCase();
          const materialMeta = item.querySelector('.material-select-meta').textContent.toLowerCase();
          
          if (materialName.includes(searchText) || materialMeta.includes(searchText)) {
            item.style.display = 'flex';
          } else {
            item.style.display = 'none';
          }
        });
      });
    }
    
    // 数量调整
    const minusBtns = document.querySelectorAll('.quantity-btn.minus');
    const plusBtns = document.querySelectorAll('.quantity-btn.plus');
    
    minusBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const input = this.nextElementSibling;
        let value = parseInt(input.value);
        if (value > parseInt(input.min)) {
          input.value = value - 1;
        }
      });
    });
    
    plusBtns.forEach(btn => {
      btn.addEventListener('click', function() {
        const input = this.previousElementSibling;
        let value = parseInt(input.value);
        if (value < parseInt(input.max)) {
          input.value = value + 1;
        }
      });
    });
    
    // 删除物资
    const deleteButtons = document.querySelectorAll('.delete-material');
    deleteButtons.forEach(btn => {
      btn.addEventListener('click', function() {
        const materialItem = this.closest('.material-item');
        materialItem.remove();
      });
    });
    
    // 添加物资项函数
    function addMaterialItem(name, specs, quantity, unit, index) {
      const newIndex = document.querySelectorAll('.material-item').length + 1;
      const materialItem = document.createElement('div');
      materialItem.className = 'material-item';
      materialItem.innerHTML = `
        <div class="material-header">
          <div class="material-name">${name}</div>
          <button type="button" class="btn-icon delete-material">
            <i class="fas fa-trash-alt text-red-500"></i>
          </button>
        </div>
        <div class="material-body">
          <div class="material-info">
            <div class="info-item">
              <span class="info-label">规格：</span>
              <span class="info-value">${specs}</span>
            </div>
            <div class="info-item">
              <span class="info-label">借用数量：</span>
              <span class="info-value">${quantity}${unit}</span>
            </div>
          </div>
          <div class="material-quantity">
            <span class="quantity-label">归还数量：</span>
            <div class="quantity-control">
              <button type="button" class="quantity-btn minus">
                <i class="fas fa-minus"></i>
              </button>
              <input type="number" class="quantity-input" value="${quantity}" min="1" max="${quantity}">
              <button type="button" class="quantity-btn plus">
                <i class="fas fa-plus"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="material-footer">
          <div class="form-group mb-0">
            <label class="form-label text-sm">物资状态</label>
            <div class="flex space-x-4">
              <label class="radio-item">
                <input type="radio" name="status-${newIndex}" value="normal" checked>
                <span class="radio-text">完好</span>
              </label>
              <label class="radio-item">
                <input type="radio" name="status-${newIndex}" value="damaged">
                <span class="radio-text">损坏</span>
              </label>
              <label class="radio-item">
                <input type="radio" name="status-${newIndex}" value="lost">
                <span class="radio-text">丢失</span>
              </label>
            </div>
          </div>
        </div>
      `;
      
      materialList.appendChild(materialItem);
      
      // 为新添加的物资项添加事件监听
      const newMinusBtn = materialItem.querySelector('.quantity-btn.minus');
      const newPlusBtn = materialItem.querySelector('.quantity-btn.plus');
      const newDeleteBtn = materialItem.querySelector('.delete-material');
      
      newMinusBtn.addEventListener('click', function() {
        const input = this.nextElementSibling;
        let value = parseInt(input.value);
        if (value > parseInt(input.min)) {
          input.value = value - 1;
        }
      });
      
      newPlusBtn.addEventListener('click', function() {
        const input = this.previousElementSibling;
        let value = parseInt(input.value);
        if (value < parseInt(input.max)) {
          input.value = value + 1;
        }
      });
      
      newDeleteBtn.addEventListener('click', function() {
        const materialItem = this.closest('.material-item');
        materialItem.remove();
        
        // 检查是否还有物资项显示损坏或丢失状态
        checkDamagedOrLostItems();
      });
      
      return materialItem;
    }
    
    // 更新物资状态事件监听
    function updateStatusRadioListeners() {
      const statusRadios = document.querySelectorAll('input[type="radio"][name^="status-"]');
      statusRadios.forEach(radio => {
        radio.addEventListener('change', function() {
          const materialItem = this.closest('.material-item');
          const statusValue = this.value;
          
          // 根据状态值更新UI
          if (statusValue === 'damaged' || statusValue === 'lost') {
            materialItem.classList.add('status-warning');
            // 如果选择了损坏或丢失，显示状态说明区域
            const statusExplanationCard = document.querySelector('.card:has(.card-header span:contains("物资状态说明"))');
            if (statusExplanationCard) {
              statusExplanationCard.style.display = 'block';
            }
          } else {
            materialItem.classList.remove('status-warning');
            // 检查是否还有物资项显示损坏或丢失状态
            checkDamagedOrLostItems();
          }
        });
      });
    }
    
    // 检查是否有物资项显示损坏或丢失状态
    function checkDamagedOrLostItems() {
      const damagedOrLostItems = document.querySelectorAll('.material-item.status-warning');
      const statusExplanationCard = document.querySelector('.card:has(.card-header span:contains("物资状态说明"))');
      
      if (statusExplanationCard) {
        if (damagedOrLostItems.length > 0) {
          statusExplanationCard.style.display = 'block';
        } else {
          statusExplanationCard.style.display = 'none';
        }
      }
    }
    
    // 初始化物资状态事件监听
    updateStatusRadioListeners();
    
    // 筛选标签
    const filterTags = document.querySelectorAll('.filter-tag');
    filterTags.forEach(tag => {
      tag.addEventListener('click', function() {
        filterTags.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        // 这里可以添加筛选逻辑
        const category = this.textContent.trim();
        filterMaterials(category);
      });
    });
    
    // 筛选物资函数
    function filterMaterials(category) {
      const materialItems = document.querySelectorAll('.material-select-item');
      if (category === '全部') {
        materialItems.forEach(item => {
          item.style.display = 'flex';
        });
      } else {
        materialItems.forEach(item => {
          const itemCategory = item.dataset.category || '';
          if (itemCategory === category) {
            item.style.display = 'flex';
          } else {
            item.style.display = 'none';
          }
        });
      }
    }
    
    // 表单验证和提交
    const returnForm = document.querySelector('form');
    returnForm.addEventListener('submit', function(event) {
      event.preventDefault();
      
      // 验证基本信息
      const title = document.querySelector('input[placeholder="请输入归还标题"]').value;
      const department = document.querySelector('select[required]').value;
      const returnDate = document.querySelector('input[type="date"]').value;
      const reason = document.querySelector('textarea[placeholder="请简要说明归还原因"]').value;
      
      // 验证物资清单
      const materialItems = document.querySelectorAll('.material-item');
      if (materialItems.length === 0) {
        alert('请至少添加一项物资');
        return;
      }
      
      // 验证物资状态说明
      const damagedOrLostItems = document.querySelectorAll('.material-item.status-warning');
      const statusExplanation = document.querySelector('textarea[placeholder="请说明物资损坏或丢失的原因"]');
      
      if (damagedOrLostItems.length > 0 && (!statusExplanation.value || statusExplanation.value.trim() === '')) {
        alert('有物资标记为损坏或丢失，请填写物资状态说明');
        statusExplanation.focus();
        return;
      }
      
      // 收集表单数据
      const formData = {
        title,
        department,
        returnDate,
        reason,
        materials: [],
        statusExplanation: statusExplanation.value
      };
      
      // 收集物资数据
      materialItems.forEach((item, index) => {
        const name = item.querySelector('.material-name').textContent;
        const specs = item.querySelector('.info-value').textContent;
        const borrowedQuantity = item.querySelectorAll('.info-value')[1].textContent;
        const returnQuantity = item.querySelector('.quantity-input').value;
        const status = item.querySelector('input[type="radio"]:checked').value;
        
        formData.materials.push({
          name,
          specs,
          borrowedQuantity,
          returnQuantity,
          status
        });
      });
      
      // 提交表单数据
      console.log('提交归还申请:', formData);
      
      // 模拟提交成功
      alert('归还申请提交成功！');
      
      // 跳转到物资管理页面
      setTimeout(() => {
        window.location.href = 'material.html';
      }, 1000);
    });
  </script>
  
  <style>
    /* 筛选标签样式 */
    .filter-tags {
      display: flex;
      gap: 8px;
    }
    
    .filter-tag {
      padding: 6px 12px;
      background-color: #f3f4f6;
      border-radius: 16px;
      font-size: 12px;
      color: #6b7280;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .filter-tag.active {
      background-color: #e6f7ff;
      color: #1890ff;
      border: 1px solid #91d5ff;
    }
    
    /* 物资项样式 */
    .material-item {
      background-color: #f9fafb;
      border-radius: 8px;
      margin-bottom: 12px;
      overflow: hidden;
    }
    
    .material-item.status-warning {
      border-left: 3px solid #f59e0b;
    }
    
    .material-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 12px;
      background-color: #f3f4f6;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .material-name {
      font-weight: 500;
    }
    
    .material-body {
      padding: 12px;
    }
    
    .material-footer {
      padding: 12px;
      border-top: 1px solid #e5e7eb;
      background-color: #f9fafb;
    }
    
    .material-info {
      display: flex;
      margin-bottom: 8px;
    }
    
    .info-item {
      margin-right: 16px;
      font-size: 14px;
      color: #6b7280;
    }
    
    .material-quantity {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .quantity-label {
      font-size: 14px;
    }
    
    .quantity-control {
      display: flex;
      align-items: center;
    }
    
    .quantity-btn {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background-color: #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
    }
    
    .quantity-input {
      width: 50px;
      height: 28px;
      text-align: center;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      margin: 0 8px;
    }
    
    /* 审批流程样式 */
    .approval-flow {
      padding: 8px 0;
    }
    
    .approval-step {
      display: flex;
      align-items: center;
      padding: 8px 0;
    }
    
    .step-icon {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: #eff6ff;
      color: #3b82f6;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }
    
    .step-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .step-approver {
      font-size: 12px;
      color: #6b7280;
    }
    
    .approval-connector {
      width: 2px;
      height: 20px;
      background-color: #e5e7eb;
      margin-left: 18px;
    }
    
    /* 物资选择模态框样式 */
    .material-select-list {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .material-select-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px;
      border-bottom: 1px solid #e5e7eb;
    }
    
    .material-select-item.selected {
      background-color: #eff6ff;
    }
    
    .material-select-info {
      flex: 1;
    }
    
    .material-select-name {
      font-weight: 500;
      margin-bottom: 2px;
    }
    
    .material-select-meta {
      font-size: 12px;
      color: #6b7280;
    }
    
    .material-select-action {
      margin-left: 12px;
      font-size: 20px;
    }
    
    /* 搜索框样式 */
    .search-box {
      position: relative;
    }
    
    .search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #9ca3af;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 12px 10px 36px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 14px;
    }
    
    /* 单选框样式 */
    .radio-item {
      display: flex;
      align-items: center;
    }
    
    .radio-text {
      margin-left: 4px;
      font-size: 14px;
    }
  </style>
</body>
</html>